<template>
    <div style="padding: 20px;box-sizing: border-box;background: #fff;">
        <el-row :gutter="20">
            <el-col :span="4" v-if="treeData.length != 0">
                <div style="height: 80vh;">
                    <avue-tree ref="tree" style="margin-right: 20px;" :option="treeOption" :data="treeData"
                        v-model="treeform" @node-click="treeNodeClick">
                    </avue-tree>
                </div>
            </el-col>

            <el-col :span="treeData.length != 0?19:24">
                <el-carousel :autoplay="false" :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="item,index in list" :key="index" class="topBox">
                        <h2 class="medium">{{ item.dept.moniker }}</h2>
                        <div class="topBox1">
                            <div>
                                <div>经营性质：{{item.dept.busiCharacter}}</div>
                                <div>
                                    医疗机构类别：{{item.dept.institutionType}}
                                </div>
                                <div>
                                    详细地址:{{item.dept.address}}
                                </div>
                            </div>
                            <div style="width: 100px;height: 100px;">
                                <el-image :src="item.dept.clinicPic" style="width: 100%;height: 100%">
                                    <div slot="error" class="image-slot">

                                    </div>
                                </el-image>
                            </div>

                        </div>
                        <div class="topBox2">
                            <div>
                                <span>科室数目: </span>
                                <span>{{item.device.deptNum}}</span>
                            </div>
                            <div>
                                <span> 检验设备数量： </span>
                                <span> {{item.device.deviceLisNum}}</span>
                            </div>
                            <div>
                                <span> 占地面积(m^2)：</span>
                                <span> {{item.device.positionSquare}}</span>
                            </div>
                            <div>
                                <span> 床位数： </span>
                                <span> {{item.device.bedNum}}</span>
                            </div>
                            <div>
                                <span>检查设备数量： </span>
                                <span> {{item.device.devicePacsNum}}</span>
                            </div>
                            <div>
                                <span> 建筑面积(m^2)：</span>
                                <span> {{item.device.buildSquare}}</span>
                            </div>
                        </div>

                    </el-carousel-item>
                </el-carousel>

                <div>
                    <div class="title">
                        <div>业务对比图</div>
                    </div>
                    <div class="typeBox">
                        <div style="width:200px">
                            <div style="font-size: 14px;
                            padding: 10px 0 ;
                            text-align: center;
                            cursor: pointer;" :class="typeIndex == index?'divSelect':''" v-for="item,index in typelist"
                                @click="selectTypeFun(item,index)">
                                {{item.snName}}</div>
                        </div>
                        <div id="main"  style="height:300px;width: calc(100% - 200px);">

                        </div>
                    </div>
                </div>
                <div style="margin-top: 16px;">
                    <div class="title">
                        <div>人员配备单</div>
                    </div>
                    <el-table :data="list" style="width: 100%">
                        <el-table-column prop="moniker" label="" width="180">

                            <template slot-scope="scope">
                                {{scope.row.dept.moniker}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="elseNum" label="职工总人数" width="180">

                            <template slot-scope="scope">
                                {{scope.row.staff.elseNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="执业医师数" width="180">
                            <template slot-scope="scope">
                                {{scope.row.staff.docNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="护士人员数" width="180">
                            <template slot-scope="scope">
                                {{scope.row.staff.nurseNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="医技人员数">
                            <template slot-scope="scope">
                                {{scope.row.staff.skillNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="管理人员数">
                            <template slot-scope="scope">
                                {{scope.row.staff.manageNum}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="医护比">
                            <template slot-scope="scope">
                                {{scope.row.staff.doctNurseRatio}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="床护比">
                            <template slot-scope="scope">
                                {{scope.row.staff.bedNurseRatio}}
                            </template>
                        </el-table-column>
                    </el-table>


                </div>
                <!-- <div style="margin-top: 16px;">
                    <div class="title">
                        <div>支付分类榜</div>
                    </div>

                    <table class="table">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" style="width: 16.6%"></th>
                                <th scope="col" style="width: 16.6%">数据</th>
                                <th scope="col" style="width: 16.6%">辖区均值</th>
                                <th scope="col" style="width: 16.6%">辖区排名</th>
                                <th scope="col" style="width: 16.6%">同类均值</th>
                                <th scope="col" style="width: 16.6%">同类排名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td scope="col">个人支付占比（%）</td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.selfRatio[0]}}</span>
                                    </span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.selfRatio[0]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.selfRatio[0]}}</span>
                                    </span>/{{financeRank.selfRatio[1]}}
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.selfRatio[2]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.selfRatio[0]}}</span>
                                    </span>/{{financeRank.selfRatio[3]}}
                                </td>
                            </tr>
                            <tr>
                                <td scope="col">医保报销占比(%)</td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.suranceRatio[0]}}</span>
                                    </span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.suranceRatio[0]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.suranceRatio[0]}}</span>
                                    </span>/{{financeRank.suranceRatio[1]}}
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.suranceRatio[2]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.suranceRatio[0]}}</span>
                                    </span>/{{financeRank.suranceRatio[3]}}
                                </td>
                            </tr>
                            <tr>
                                <td scope="col">现金支付占比(%)</td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.cashRatio[0]}}</span>
                                    </span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.cashRatio[0]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.cashRatio[0]}}</span>
                                    </span>/{{financeRank.cashRatio[1]}}
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.cashRatio[2]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.cashRatio[0]}}</span>
                                    </span>/{{financeRank.cashRatio[3]}}
                                </td>
                            </tr>
                            <tr>
                                <td scope="col">移动支付占比(%)</td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.mobileRatio[0]}}</span>
                                    </span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.mobileRatio[0]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.mobileRatio[0]}}</span>
                                    </span>/{{financeRank.mobileRatio[1]}}
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">{{financeRank.mobileRatio[2]}}</span>
                                </td>
                                <td scope="col">
                                    <span v-for="item,i in list">
                                        <span v-if="i">/</span><span
                                            :class="'color'+i">{{item.finance.mobileRatio[0]}}</span>
                                    </span>/{{financeRank.mobileRatio[3]}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> -->
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import { list } from "@/api/mgmt/supervise";
    var echarts = require('echarts');
    import { orgTree } from "@/api/mgmt/sys/org"


    export default {
        name: 'supervise',
        data() {
            return {
                list: [],
                typelist: [],
                output1x: [],
                typeIndex: 0,
                financeRank: {
                    "selfRatio": [60, 54, 62, 1580],
                    "suranceRatio": [80, 54, 72, 1580],
                    "cashRatio": [23, 54, 26, 1580],
                    "mobileRatio": [77, 54, 74, 1580]
                },
                treeData: [],
                treeOption: {
                    defaultExpandAll: true,
                    addBtn: false,
                    menu: false,
                    props: {
                        labelText: '标题',
                        label: 'name',
                        value: 'id',
                        children: 'children'
                    }
                },
                treeform: {},
                pid: '',
                idS: [],//["1", "2", "90", "92", "93", "103", "104", "105", "106"]
                earchShow:true
                

            }
        },
        mounted() {
            let typelist = [
                { "snVal": 1, "snName": "营业额（万元）", key: 'income' },
                { "snVal": 2, "snName": "门诊人次", key: 'monthOpdAverage' },
                { "snVal": 3, "snName": "住院人次", key: 'monthIpdAverage' },
                { "snVal": 4, "snName": "转出人数", key: 'outNum' },
                { "snVal": 5, "snName": "住院天数", key: 'ipdAverageDay' },
                { "snVal": 6, "snName": "转入人数", key: 'inNum' },
                { "snVal": 7, "snName": "家庭签约人次", key: 'familySignNum' },
                { "snVal": 8, "snName": "公卫建档人次", key: 'publicSignNum' }
            ];
            this.typelist = typelist;

            this.onolad();
            this.myTimeType()

        },
        methods: {
            treeNodeClick(data, node, comp) {
                console.log(this.pid != data.id)
                if (this.pid != data.id) {
                    this.pid = data.id;
                    this.idS = [];
                    this.allData.forEach(element => {
                        if (element.pid == data.id) {
                            this.idS.push(element.id)
                        }

                    });
                    this.listFun();
                } else {
                    this.pid = '';

                    this.idS = [];
                    this.allData.forEach(element => {
                        this.idS.push(element.id)
                    });
                    this.listFun();


                }

            },
            selectTypeFun(item, index) {
                this.typeIndex = index;
                this.typeFun()
            },
            onolad() {

                orgTree({
                    searchType: 1,
                    searchContent: '',
                }).then(res => {
                    this.allData = res.list;
                    this.idS = [];
                    res.list.forEach(element => {
                        this.idS.push(element.id)
                    });

                    res.list.shift();
                    // 按 type 字段分组
                    let data = res.list.reduce((acc, item) => {
                        if (!acc[item.type]) {
                            acc[item.type] = [];
                        }
                        acc[item.type].push(item);
                        return acc;
                    }, {});

                    this.treeData = Object.values(data[1] || {});


                    this.listFun();

                })


            },
            listFun() {
                list(this.idS).then(res => {
                    this.list = res.list;
                    this.typeFun();

                })
            },

            typeFun() {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);

                let dataName = []
                let seriesArry = []
                this.list.map((item, index) => {
                    dataName.push(item.dept.moniker);
                    seriesArry.push({
                        name: item.dept.moniker,
                        type: 'line',
                        data: item.business[this.typelist[this.typeIndex].key]
                    })
                })
                
                var option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: dataName
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            // saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.output1x,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesArry
                };

                option && myChart.setOption(option);

                myChart.resize();
                
                
            },
            myTimeType() {
                var myTime = new Date();
                switch (myTime.getMonth()) {
                    case 0:
                        this.output1x = ['2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '本月'];
                        break;
                    case 1:
                        this.output1x = ['3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '本月'];
                        break;
                    case 2:
                        this.output1x = ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '本月'];
                        break;
                    case 3:
                        this.output1x = ['5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '本月'];
                        break;
                    case 4:
                        this.output1x = ['6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '本月'];
                        break;
                    case 5:
                        this.output1x = ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '本月'];
                        break;
                    case 6:
                        this.output1x = ['8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '本月'];
                        break;
                    case 7:
                        this.output1x = ['9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '本月'];
                        break;
                    case 8:
                        this.output1x = ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '本月'];
                        break;
                    case 9:
                        this.output1x = ['11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '本月'];
                        break;
                    case 10:
                        this.output1x = ['12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '本月'];
                        break;
                    case 11:
                        ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '本月'];
                        break;
                    default:
                        this.output1x = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                }
            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        /* line-height: 300px; */
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #f2f2f2;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #f2f2f2;

    }

    .topBox {
        padding: 20px;
        box-sizing: border-box;
    }

    .topBox2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .topBox2>div {
        width: 33.33333%;
    }

    .topBox1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .topBox2,
    .topBox1 {
        font-size: 16px;
        line-height: 30px;
        color: #666;
    }

    .typeBox {
        display: flex;
        justify-content: space-between;
    }

    .divSelect {
        background: #1890FF;

        color: #fff;
    }

    .color0 {
        color: #7fff00;
    }

    .color1 {
        color: red;
    }

    .color2 {
        color: #ffa500;
    }

    .color3 {
        color: #008000;
    }

    .color4 {
        color: #a52a2a;
    }

    .color5 {
        color: #7fffd4;
    }

    .table,
    .table thead,
    .table thead tr {
        width: 100%;
        text-align: center;
    }

    .table thead tr th,
    .table tbody tr td {
        padding: 10px 0;
        border-bottom: 1px solid #dfe6ec;
        color: #606266;
    }
</style>